// common
@import "./variables";
#main {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.has-header {    // 给有rp-header的父元素添加,使其内容从hrp-header下开始
    padding-top: $header-height; // 0.88rem

    .better-scroll-page {
        top: $header-height;
    }
}

.has-menu {    // 给有rp-menu的父元素添加,使其内容于rp-menu上结束
    padding-bottom: $menu-height; // 0.98rem

    .better-scroll-page {
        bottom: $menu-height; // +0.01事为了清除浮点计算不精确产生的缝隙
    }
}

// 给某个页面级别的组件应用 可结合has-header和has-menu属性使用
.better-scroll-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

// 文本超出显示省略号
.text-ellipsis {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

// 水平垂直居中
.h-v-middle {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
// 水平居中
.h-middle {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}
// 垂直居中
.v-middle {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
// 点击交互效果
.touch-active {
    &:active {
        background-color: rgba(0, 0, 0, 0.1);
    }
    transition:background-color .2s ease-in;
}
// 左浮动
.fl {
    float: left;
}
// 右浮动
.fr {
    float: right;
}




// TODO:新增样式在此上部依次加入
/*
 * has-header   header 父组件使用
 * has-menu     menu 父组件使用
 * better-scroll-page   给某个页面级别的组件应用 可结合has-header和has-menu属性使用
 * text-ellipsis    文本超出显示省略号
 * h-v-middle   水平垂直居中
 * h-middle     水平居中
 * v-middle     垂直居中
 * touch-active 点击交互效果
 * fl           左浮动
 * fr           右浮动
 *
 **/

.content-bg {
    background-color: #F4F4F4;
    min-height: 101%;
    height: 100%;
}
.out-box {
    background-color: #fff;
}


.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

@keyframes flash {
    from, 50%, to {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash;
}

.ionicons {
    font-size: .4166666667rem;
}
